<template>
  <div class="forgot-password-container">
    <!-- 头部返回按钮 -->
    <div class="header">
      <van-icon name="arrow-left" size="20" @click="$router.back()" />
    </div>

    <!-- 主内容区 -->
    <div class="content">
      <div class="logo-container">
        <div class="logo">忘记密码</div>
        <p class="subtitle">重置密码，找回您的账户</p>
      </div>

      <van-form @submit="onSubmit">
        <!-- 邮箱输入框 -->
        <van-field v-model="email" type="email" label="邮箱" placeholder="请输入你的邮箱" required
          :rules="[{ required: true, message: '请输入邮箱' }, { type: 'email', message: '邮箱格式不正确' }]" />

        <!-- 验证码输入框 -->
        <van-field v-model="code" type="text" label="验证码" placeholder="请输入验证码" required
          :rules="[{ required: true, message: '请输入验证码' }]">
          <template #button>
            <van-button size="small" :loading="sendingCode" :disabled="countdown > 0" @click="sendCode">
              {{ countdown > 0 ? `${countdown}s后重试` : '获取验证码' }}
            </van-button>
          </template>
        </van-field>

        <!-- 新密码输入框 -->
        <van-field v-model="newPassword" type="password" label="新密码" placeholder="请设置新密码" required
          :rules="[{ required: true, message: '请设置新密码' }]" />

        <!-- 确认密码输入框 -->
        <van-field v-model="confirmPassword" type="password" label="确认密码" placeholder="请再次输入新密码" required
          :rules="[{ required: true, message: '请确认密码' }, { validator: validatePasswordMatch }]" />

        <!-- 提交按钮 -->
        <div class="button-container">
          <van-button type="primary" round block @click="resetPwd">
            重置密码
          </van-button>
        </div>
      </van-form>

      <!-- 返回登录链接 -->
      <div class="login-link">
        <router-link to="/login">返回登录</router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onUnmounted, ref } from "vue";
import { POST } from "../services/request";
import { showToast } from "vant";

// 存用户数据 
const userData = JSON.parse(localStorage.getItem('LoginUser'))
const email = ref(null)
const code = ref(null)
const newPassword = ref(null)
const confirmPassword = ref(null)
const countdown = ref(0)
const timer = ref(null)

// 组件卸载时清除定时器，避免内存泄漏
onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
});

// 发送验证码
const sendCode = async () => {
  // console.log(email.value);
  if (email.value == '') {
    showToast('邮箱不能为空！')
  } else {
    if (countdown.value > 0) return;
    const sendCode = await POST({
      url: 'Glogin/forgetPwd',
      params: {
        email: email.value,
        uid: userData.id,
        mobile: userData.mobile
      }
    })
    if (sendCode.code) {
      showToast(sendCode.msg);
      countdown.value = 60;
      timer.value = setInterval(() => {
        countdown.value--;
        if (countdown.value <= 0) {
          clearInterval(timer.value);
          timer.value = null
        }
      }, 1000)
    } else {
      showToast(sendCode.msg);
    }
  }
}

// 重置密码
const resetPwd = async () => {
  // console.log(111);
  if (newPassword.value === confirmPassword.value) {
    const resetPwdRes = await POST({
      url: '/Glogin/resetPwd',
      params: {
        email: email.value,
        code: code.value,
        password: newPassword.value,
      }
    })
    if(resetPwdRes.code){
      showToast(resetPwdRes.msg)
    }else{
      showToast(resetPwdRes.msg)
    }
  }else{
    showToast('密码不一致');
  }

}



</script>

<style scoped>
.forgot-password-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f7f8fa;
}

.header {
  padding: 20px 16px;
}

.content {
  flex: 1;
  padding: 0 16px;
}

.logo-container {
  text-align: center;
  margin: 40px 0 60px;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.subtitle {
  font-size: 14px;
  color: #666;
}

.button-container {
  margin-top: 40px;
}

.login-link {
  text-align: center;
  margin-top: 20px;
}

.login-link router-link {
  color: #07c160;
  font-size: 14px;
}
</style>